<!-- 搜索出来的视频课程 -->
<template>
	<!-- 不能用v-if (i: 每个tab页的专属下标;  index: 当前tab的下标; 申明在 MescrollMoreItemMixin )-->
	<view v-show="i === index">
		<!-- 下拉框 -->
		<down-bar :params="params" @search="search" :downBars="downBars"></down-bar>
		
		
		
		<!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
		<!-- @init="mescrollInit" 这个是否第一次自动触发 -->
		<mescroll-body :ref="'mescrollRef'+i" :down="downOption"  @down="downCallback" :up="upOption" @up="upCallback" >
			<!-- 课程数据列表 -->
			<view style="padding: 0 30rpx;">
				<!-- 课程数据列表项 -->
				<course-item v-for="(item, index) in list" :key="index" :item="item"></course-item>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	// 搜索条件下拉框
	import downBar from './down-bar.vue'
	
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	
	// 搜索条件下拉框数据
	import downBars from '@/config/course-down-bar.js'
	import courseItem from '@/components/common/course-item.vue'
	
	import api from '@/api/index.js'
	
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin], 
		
		components: {downBar, courseItem},
		props: {
			params: { // 其他页面跳转到搜索页所带上请求参数，用于回显标题处
				type:Object
			},
			content: { // 搜索内容
				type: String
			}			
		},
		
		
		
		data(){
			return {
				upOption:{
					auto:false, // 不自动加载
					noMoreSize: 4, 
				},
				downBars: downBars(), // 加载下拉框数据
				
				searchData: { // 封装搜索条件
					content: null, // 关键字内容
					sort: null, //排序类型（new 最新，hot热门）
					courseType: null, // 'free/pay'
					labelId: null, //标签id
					categoryId: null, // 分类id
				},
				
				list: [] // 渲染列表数据
			}
		},
		
		mounted() {

			this.params && Object.keys(this.searchData).forEach((key)=>{
				// // 防止参数值为0也是有效的，所以要将0也正常处理，因为默认0会被false
				this.searchData[key] = ( this.params[key] || this.params[key] === 0 ) ? this.params[key] : null
			})
			console.log('mounted合并的searchData', this.searchData)
		},
		
		methods: {
			// 搜索（data就是查询条件）
			search(data) {
				
				console.log("coulist-list的searchd的data",data)

				if( data.value ) this.searchData.content =  data.value != this.searchData.content ? data.value : this.searchData.content
				if( data.content ) this.searchData.content =  data.content!= this.searchData.content ? data.content : this.searchData.content
				if(this.searchData.content === '全部分类' ) this.searchData.content  = null;
				
				this.searchData.categoryId = typeof(data.categoryId) !== 'undefined' &&( data.categoryId !=this.searchData.categoryId ) ? data.categoryId : this.searchData.categoryId
				this.searchData.sort = typeof(data.sort) !== 'undefined'  && ( data.sort != this.searchData.sort ) ? data.sort : this.searchData.sort 
				this.searchData.courseType = typeof(data.courseType) !== 'undefined'  && (data.courseType != this.searchData.courseType) ? data.courseType :this.searchData.courseType
				this.searchData.labelId = typeof(data.labelId) !== 'undefined' && (data.labelId != this.searchData.labelId )? data.labelId :this.searchData.labelId

				console.log('查询逻辑', this.searchData)
				
				// 内容将page.num=1,再upCallback方法
				this.mescroll.resetUpScroll()
			},
			
			// 上拉加载的回调（下拉也会调用此方法，page.num = 1)
			async upCallback(page) {
				
				console.log('根据分页条件查询列表数据upCallback', page.num, page.size, this.searchData)
				
				// 根据分页条件查询列表数据
				const {data} = await api.getList(this.searchData, page.num, page.size)
				
				
				// 注意是声明的常量 list
				const currList = data.records
				
				// 第一次加载数据（下拉刷新）
				if(page.num === 1) {
					this.list = []
					// 回到顶部(距离顶部位置，时长毫秒数)
					this.mescroll.scrollTo(0, 0)
				}
				
				// 追加新数据
				this.list = this.list.concat(currList)
				// console.log('list', this.list)
				// 请求成功，隐藏加载状态
				this.mescroll.endBySize(currList.length, data.total)
			},
			
			
		}
	}
</script>

<style>
</style>
